<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { nextTick, ref } from 'vue'

defineProps<{
  list: BannerItem[]
}>()

const activeIndex = ref<number>(0)
// 轮播图改变触发 知识点【unihelper】：unihelper是社区提供的一个uni的TS类型插件，如果需要让uni的元素都具备类型提示，需要显式使用它，格式如下
const onChange: UniHelper.SwiperOnChange = (e) => {
  activeIndex.value = e.detail.current
}
</script>

<template>
  <view class="carousel">
    <swiper @change="onChange" :current="activeIndex" :circular="true" :autoplay="false" :interval="3000">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in list" :key="item.id" class="dot" :class="{ active: index === activeIndex }"></text>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/components/style/XtxSwiper.scss';
</style>
